<template>
    <el-dialog class="loss-set" :append-to-body="true" :title="data.charCode === 'numUserDefined' ? '自定义连续型字段' : '自定义离散型字段'" :visible.sync="data.show" width="750px" :close-on-click-modal="false">
        <el-form v-if="items.length" ref="lossSet" label-position="right" :model="form" @submit.native.prevent>
            <el-form-item class="one-set" label="一键填充">
                <el-input clearable placeholder="请输入" v-model="value"></el-input>
                <el-button type="primary" @click="handleValue">确定</el-button>
            </el-form-item>
            <template v-for="(item, index) in items">
                <el-form-item :key="index" :label="item.name" :prop="item.name" :rules="[{ validator: checkNumber, required: true, trigger: 'blur' }]">
                    <el-input clearable :placeholder="`请输入${item.name}`" v-model="form[item.name]"></el-input>
                </el-form-item>
            </template>
        </el-form>
        <nodata-box v-else></nodata-box>
        <span slot="footer" class="dialog-footer">
            <el-button @click="data.show = false">取 消</el-button>
            <el-button type="primary" v-preventReClick="2000" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import NodataBox from '@/components/NodataBox'
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'LossSet',
    props: {
        data: {
            type: Object
        }
    },
    components: { NodataBox },
    data () {
        var checkNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error(`请输入${rule.fullField}`))
            }
            let re = /^\d+(\.\d+)?$/
            if (!re.test(value)) {
                callback(new Error('请输入数值型'))
            } else {
                callback()
            }
        }
        return {
            checkNumber: checkNumber,
            value: '',
            form: {},
            items: []
        }
    },
    computed: {
        ...mapGetters({
            lossValue: 'common/getLossValue',
            nodePropsInfo: 'common/getNodePropsInfo'
        })
    },
    created () {
        this.init()
    },
    methods: {
        ...mapMutations({
            setLossValue: 'common/setLossValue'
        }),
        setDefaultValue () {
            if (this.lossValue && this.data.charCode === Object.keys(this.lossValue)[0]) {
                this.form = this.lossValue[this.data.charCode]
            } else {
                let object = this.nodePropsInfo.params.filter(item => item.charCode === this.data.charCode)[0].paramValue
                for (const key in object) {
                    this.$set(this.form, key, object[key])
                }
            }
        },
        init () {
            let numStrategyArr = []
            let strStrategy = []
            const { allList, list, charCode } = this.data
            list.forEach(val => {
                allList.forEach(item => {
                    if (val === item.name) {
                        ['Long', 'Double', 'Integer'].includes(item.type) ? numStrategyArr.push(item) : strStrategy.push(item)
                    }
                })
            })
            this.items = charCode === 'numUserDefined' ? numStrategyArr : strStrategy
            if (this.items.length) {
                this.setDefaultValue()
            }
        },
        handleValue () {
            this.items.forEach(item => {
                this.$set(this.form, item.name, this.value)
            })
        },
        handleConfirm () {
            if (!this.items.length) {
                this.$message.error('请先选择字段')
                return
            }
            this.$refs['lossSet'].validate((valid) => {
                if (valid) {
                    this.data.show = false
                    this.setLossValue({ [this.data.charCode]: this.form })
                    this.$emit('save', this.form)
                } else {
                    return false
                }
            })
        }
    }
}
</script>
<style lang="less">
    .loss-set {
        .el-dialog__body {
            max-height: 500px;
        }
        .one-set {
            display: flex;
            .el-button {
                margin-left: 20px;
            }
        }
    }
</style>
